<template>
  <div class="EnvironmentTbs">
    <div class="title"></div>
    <div class="tabs-view">
      <el-button v-for="(i, index) in tabs" :key="i.name" :type="activeBtn == index ? 'primary' : 'default'"
        @click="activeBtn = index">
        {{ i.name }}
      </el-button>
    </div>
    <div class="tab-content">
      <InitCps v-show="activeBtn == 0"></InitCps>
      <ThicknessCps v-show="activeBtn == 1"></ThicknessCps>
      <LifeColorCps v-show="activeBtn == 2"></LifeColorCps>
      <NDICps v-show="activeBtn == 3"></NDICps>
    </div>
  </div>
</template>

<script>
import InitCps from "./TabCps/InitCps";
import ThicknessCps from "./TabCps/ThicknessCps";
import LifeColorCps from "./TabCps/LifeColorCps";
import NDICps from "./TabCps/NDICps";
export default {
  name: "EnvironmentTbs",
  data() {
    return {
      tabs: [
        { name: this.$t("message.environmentSetting.tabs.title_1") },
        { name: this.$t("message.environmentSetting.tabs.title_2") },
        { name: this.$t("message.environmentSetting.tabs.title_3") },
        // { name: this.$t("message.environmentSetting.tabs.title_4") },
      ],
      activeBtn: 0,
    };
  },
  components: {
    InitCps,
    ThicknessCps,
    LifeColorCps,
    NDICps,
  },
  watch: {},
  methods: {},
  created() { },
  mounted() { },
  beforeDestroy() { },
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.EnvironmentTbs {
  position: relative;
  height: 100%;
  padding-left: 32px;

  .title {
    width: 100%;
    height: 32px;
    border-bottom: 1px solid #d8d8d8;
  }

  .tabs-view {
    width: 100%;
    padding: 16px 0;

    button {
      width: 196px !important;
      margin: 0;
      border-radius: 0;
    }
  }

  .tab-title {
    height: 32px;
    background: #ffffff;
    border: 1px solid #dee0e3;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #1f2329;
    border-right: 0 none;
    transition: 0.5s;
  }

  .active-style {
    background: #106ebe;
    color: #ffffff;
  }

  .tab-title:nth-child(1) {
    border-radius: 4px 0 0 4px;
  }

  .tab-title:nth-child(3) {
    border-right: 1px solid #dee0e3;
    border-radius: 0 4px 4px 0;
  }

  .tab-content {
    width: 100%;
    height: calc(100% - 96px);
  }
}
</style>
